import React from 'react'
import store from '../store/store'
import { withRouter } from 'react-router-dom'
import { getRecommendPlaylistDetils, getSongUrl, getSongLyric } from '../api/index'
import back from '../assets/images/toBack.png'
require('./recommendPlayList/recommendPlayList.css')


class RecommendPlayList extends React.Component {
    constructor(props) {
        super(props)
        //    console.log(props)
        this.state = {
            description: "",
            coverImgUrl: "",
            playListDetils: [],
            songUrl: "",
            songImg: "",
            songTitle: "",
            songArits:"",
            songid:"",
            //从首页热门歌单推荐获取每个歌单的id
            recommendListId: props.location.state,
            indexs: "",
            lyric:[]
        }
    }
    //获取歌曲id，获取点击的是那首歌
    handleGin(id, index, picUrl, name,ar) {
        console.log(id)
        this.getSongUrlLocal(id)
        this.getSongLy(id)
        store.dispatch({
            type: 'GET_SONGIMG',
            payload: { songImg: picUrl }
        })
        store.dispatch({
            type: 'GET_SONGTitle',
            payload: { songTitle: name }
        })
        store.dispatch({
            type: 'GET_SONGERNAME',
            payload: { songArits: ar }
        })
        store.dispatch({
            type: 'GET_SONGID',
            payload: { songId: id }
        })
    }
       //通过歌曲id获取歌词
       getSongLy(id) {
           console.log(id)
        getSongLyric(id).then((res) => {
            console.log(res )
                store.dispatch({
                    type: 'GET_LYRIC',
                    payload: { lyric: res.data.lrc.lyric }
                })  
        })
    }  
    //请求音乐Url
    getSongUrlLocal(id) {
        getSongUrl(id).then((res) => {
            store.dispatch({
                type: 'GET_SONGURL',
                payload: { songUrl: res.data.data[0].url }
            })
        })
    }
    //获取推荐歌单详情
    getPlayListDetils(recommendListId) {
        getRecommendPlaylistDetils(recommendListId).then((res) => {
            this.setState({
                description: res.data.playlist.description,
                coverImgUrl: res.data.playlist.coverImgUrl,
                playListDetils: res.data.playlist.tracks
            })
        })
    }
    componentWillMount() {
        this.getPlayListDetils(this.state.recommendListId)
    }
    render() {
        const { description, coverImgUrl, playListDetils,lyric} = this.state
        console.log(lyric)
        let lis = playListDetils.map(({ id, al, name, ar }, index) => {
            return (
                <li className="playSingleList" key={id} onClick={this.handleGin.bind(this, id, index, al.picUrl, name,ar[0].name,lyric)}>
                    <img src={al.picUrl} alt="图片" className="playSingleImg" />
                    <div className="playSingleListDetil">
                        <h1 className="playSingleListTitle" style={{ color: "#fff" }}>{name}</h1>
                        <p className="playSingleCreaTor" >{ar[0].name}</p>
                    </div>
                </li>
            )
        })
        return (
            <div>
                <div className="recommendPlayList" style={{ width: "100%", height: "260px", background: ' url(' + coverImgUrl + ') center center / 100% 306px no-repeat' }}>
                    <div className="back" onClick={() => {
                        this.props.history.go(-1)
                    }}>
                        <img src={back} alt="" className="icon-back" />
                    </div>
                    <p className="description">{description}</p>
                </div>
                <div className="playlistSingle">
                    <ul className="playSingleShow">
                        {lis}
                    </ul>
                </div>
            </div>
        )
    }
}

export default withRouter(RecommendPlayList)